<script setup lang="ts">
import { onMounted } from "vue";
// console.log("地图");
// var map = new T.Map("map");
// var LngLat = new T.LngLat(117.225601, 37.729007), //初始化中心点
//   zoom = 10;
// map.centerAndZoom(LngLat, zoom); //设置缩放级别

const initMap = () => {
  // 检查天地图 API 是否加载完成
  if (typeof T === "undefined") {
    console.error("天地图 API 未加载！");
    return;
  }

  // 初始化地图
  const map = new T.Map("map-container");

  // 设置中心点（北京天安门，经纬度：[116.404, 39.915]）
  const centerPoint = new T.LngLat(114.409713, 30.515334);
  map.centerAndZoom(centerPoint, 15); // 15 是缩放级别

  // 可选：添加标记
  const marker = new T.Marker(centerPoint);
  map.addOverLay(marker);
};

onMounted(() => {
  initMap();
});
</script>
<template>
  <div id="map-container" style="width: 100%; height: 500px">我是地图</div>
</template>

<style lang="scss" scoped></style>
